<template>
  <div class="userBackground">
    <div class="title">
      <span>个人中心——{{showTitle}}</span>
    </div>
    <div class="user-center">
      <div class="user-left">
        <el-menu
            default-active="1-1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#fff"
            text-color="#303133"
            active-text-color="#409EFF">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-truck"></i>
              <span>车辆管理</span>
            </template>
            <el-menu-item index="1-1" @click="toApplyNow">立即申请</el-menu-item>
            <el-menu-item index="1-2" @click="toApplied">已申请</el-menu-item>
          </el-submenu>
          <el-menu-item index="2" @click="toBiddingManage">
            <i class="el-icon-stopwatch"></i>
            <span slot="title">投标管理</span>
          </el-menu-item>
          <el-menu-item index="3" @click="toActivityManage">
            <i class="el-icon-bangzhu"></i>
            <span slot="title">活动管理</span>
          </el-menu-item>
          <el-menu-item index="4" @click="toVolunteer">
            <i class="el-icon-thumb"></i>
            <span slot="title">志愿者</span>
          </el-menu-item>
          <el-menu-item index="5" @click="toFeedbackManage">
            <i class="el-icon-chat-square"></i>
            <span slot="title">反馈管理</span>
          </el-menu-item>
          <el-menu-item index="6" @click="toUserInfo">
            <i class="el-icon-menu"></i>
            <span slot="title">个人信息</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="user-right">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      showTitle:'车辆管理'
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    toApplyNow() {
      this.$router.push({path:'/userLayout/userBackground/applyNow'})
      this.showTitle = '车辆管理'
    },
    toApplied() {
      this.$router.push({path:'/userLayout/userBackground/applied'})
      this.showTitle = '车辆管理'
    },
    toBiddingManage(){
      this.$router.push({path:'/userLayout/userBackground/biddingManage'})
      this.showTitle = '投标管理'
    },
    toActivityManage() {
      this.$router.push({path:'/userLayout/userBackground/activityManage'})
      this.showTitle = '活动管理'
    },
    toVolunteer() {
      this.$router.push({path:'/userLayout/userBackground/volunteer'})
      this.showTitle = '志愿者管理'
    },
    toFeedbackManage() {
      this.$router.push({path:'/userLayout/userBackground/feedbackManage'})
      this.showTitle = '反馈管理'
    },
    toUserInfo() {
      this.$router.push({path:'/userLayout/userBackground/userInfo'})
      this.showTitle = '个人信息'
    },

  }
}
</script>

<style lang="less" scoped>


  .userBackground {
    display: flex;
    padding: 30px 0;

    margin: auto;
    min-width: 1000px;
    width: 80%;
    flex-wrap: wrap;
    

    .title {
      display: flex;
      margin: 0 0 20px 0 ;
      padding: 20px;
      width: 100%;
      justify-content: flex-start;
      font-size: 20px;
      background-color: #fff;
      border-radius: 5px;
    }
    .user-center {
      display: flex;
      width: 100%;
      padding: 20px;
      justify-content: space-between;
      background-color: #fff;
      border-radius: 5px;
      .user-left {
        width: 18%;
        height: 100%;
        min-width: 201px;
        border-right: 1px solid #cccccc;
      }
      .user-right {
        width: 80%;
        height: 600px;

      }
    }
  }

  /deep/ .el-menu {
    border-right: 0;
  }



</style>